<h3>Final Example</h3>
<br />
@if (vm.baseModel$ | async; as bm) {
<mat-expansion-panel
  class="list"
  (expandedChange)="vm.listExpandedChanges.next($event)"
  [expanded]="bm.listExpanded"
>
  <mat-expansion-panel-header style="position: relative">
    @if (bm.isPending) {
    <mat-progress-bar [mode]="'query'"></mat-progress-bar>
    }
    <mat-panel-title>User Name</mat-panel-title>
    <mat-panel-description>
      @if (!bm.listExpanded) {
      <span
        >{{bm.list.length}} Repositories Updated every: {{bm.refreshInterval}}
        ms
      </span>
      } @if (bm.listExpanded) {
      <span>{{bm.list.length}}</span>
      }
    </mat-panel-description>
  </mat-expansion-panel-header>
  <!-- NOTE: in the view the only variable we want to touch is `vm`-->
  <button
    mat-raised-button
    color="primary"
    (click)="vm.refreshClicks.next($event)"
  >
    Refresh List
  </button>
  @if (bm.list.length) {
  <div>
    <mat-list>
      @for (item of bm.list; track item) {
      <mat-list-item> {{item.name}} </mat-list-item>
      }
    </mat-list>
  </div>
  } @else {
  <mat-card>No list given!</mat-card>
  }
</mat-expansion-panel>
}
